<template>
    <div style="width: 800px; margin: 100px auto 0; text-align: center">
        <h1>题库</h1>
        <div style="margin-bottom: 20px">
            <el-autocomplete
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入题目编号/题目描述"
                @select="handleSelect"
                style="width: 300px;"
             ></el-autocomplete>
            <span class="el-icon-search search-ques"></span>
        </div>
        <div style="width: 100%; text-align: left">
            <div class="ques-box ques-box-head ">
                <span class="num">序号</span>
                <span class="name">题目</span>
                <span class="rate">通过率</span>
                <span class="dif">难度</span>
            </div>
            <div class="ques-box" v-for="item in questions">
                <span class="num">{{item.id}}</span>
                <span class="name"><a @click="con(item.id)">{{item.name}}</a></span>
                <span class="rate">{{item.rate}}%</span>
                <span class="dif">{{item.dif}}</span>
            </div>
        </div>
        <div style="width: 100%; text-align: right;margin: 20px;">
            <div class="block">
                <el-pagination
                        layout="prev, pager, next"
                        :total="pageNum"
                        @current-change="pageChange"
                        page-size="50">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {request} from "../../network/request";

    export default {
        name: "questionBank",
        data(){
            return{
                pageNum:16,
                restaurants: [],
                state: '',
                timeout:  null,
                questions:[]
            }
        },

        methods: {
            pageChange(i){
                request({
                    url:"/question/getAllAlgorithmQuestion",
                    method: "post",
                    params:{
                        pageIndex: i
                    }
                }).then(res=>{
                    console.log(res.data);
                    this.questions = res.data;
                    //alert(res.data);

                }).catch(err=>{
                    //alert(err);
                    console.log(err);
                });
            },
            con(item){
                console.log(item);
                sessionStorage.setItem("questionID", item);
                this.$router.push("/question");
            },
            loadAll() {
                return [
                    { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                    { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                ];
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
            request({
                url:"/question/getAllAlgorithmQuestion",
                method: "post",
                params:{
                    pageIndex:1
                }
            }).then(res=>{
                console.log(res.data);
                this.questions = res.data;
                //alert(res.data);

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
            request({
                url:"/question/getPageSize",
                method: "post",
                params:{
                }
            }).then(res=>{
                console.log(res.data);
                this.pageNum = res.data;
                //alert(res.data);

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
        }
    }
</script>

<style scoped>

    .ques-box{
        border-top: 1px solid #e8eaf1;
        border-left: 1px solid #e8eaf1;
        border-right: 1px solid #e8eaf1;
        transition: 1s;
    }
    .ques-box:hover{
        background-color: #e8eaf1;
    }
    .ques-box-head:hover{
        background: #fff !important;
    }
    .ques-box:last-child{
        border-bottom:  1px solid #e8eaf1;
    }
    .ques-box span{
        display: inline-block;
        text-align: center;
        height: 40px;
        line-height: 40px;

    }
    .ques-box .num{
        width: 110px;
    }
    .ques-box .name{
        width: 460px;
        text-align: left;
    }
    .ques-box .name a{
        color: #409EFF;
        cursor: pointer;
    }
    .ques-box .rate{
        width: 100px;
    }
    .ques-box .dif{
        width: 100px;
    }
    .search-ques{
        display: inline-block;
        margin-left: 10px;
        font-size: 25px;
        cursor: pointer;
        line-height: 30px;

    }
    .search-ques:hover{
        color: #409EFF;
    }
</style>